In an attempt to spice up a navigation system I’m working on, I took to CodePen to experiment with some CSS-based 3D books on a shelf.
Although I believe the books turned out pretty good, I dashed the effort in lieu of a more simplistic approach. That aside, figured I would share the books I came up with, primarily because web development projects are fun to share.
Development Phases
Sources
The base for this development effort was in part thanks to
Intro to CSS 3D Transforms by
David DeSandro.
Although I completely overhauled and applied all types of modifications, David’s examples provided the initial insights.
Gradient lines for the edged faces on books is thanks to moz://a’s MDN web docs.
I originally tried a pseudo :after class for the shelf, but due to perspective incompatibilities, I ended up only using this for the soft blur between books.
The pseudo class approach I tried was based on this Stack Overflow: Answer by jme11 with a Demo on Bootply
-Keith D Commiskey
https://keithdc.com
Update [2019-11-07]
The more simplistic approach I took was with rotating just one plane, as opposed to animating 3, 4, 5, or 6 panes on each book as I was doing above. Yet as simplistic as they may be, I believe they turned out pretty good (for a non-designer).
Keith D Commiskey
https://keithdc.com